import {observer} from 'mobx-react-lite';
import {Path, Svg} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {IconProps} from './types';

export const SvgFire = observer((props: IconProps) => {
  const {colorKey = 'color_2', ...rest} = props;
  const {theme} = useGlobalStore();
  return (
    <Svg width="12" height="14" viewBox="0 0 12 14" fill="none" {...rest}>
      <Path
        d="M3.75191 13.6334C4.35191 13.8334 4.55191 13.2667 4.31858 13.0667C3.51858 12.5 3.11858 11.5 3.41858 10.6C3.71858 9.60004 4.51858 9.20004 4.51858 7.70004C4.51858 7.70004 5.51858 8.46671 5.31858 9.60004C6.31858 8.43338 5.88524 6.93338 5.68524 6.23338C8.25191 7.60004 10.4519 10.5334 7.88524 13.0667C7.58524 13.3334 7.88524 13.7667 8.35191 13.6334C15.3186 9.66671 10.0519 3.73338 9.15191 3.03338C9.45191 3.73338 9.51858 4.83338 8.88524 5.40004C7.81858 1.43338 5.25191 0.633377 5.25191 0.633377C5.55191 2.70004 4.08524 4.90004 2.75191 6.60004C2.68524 5.73338 2.65191 5.20004 2.25191 4.43338C2.15191 5.90004 0.985243 7.10004 0.685243 8.60004C0.285243 10.6334 0.985243 12.0667 3.75191 13.6334Z"
        fill={getColorStr(theme, colorKey)}
      />
    </Svg>
  );
});
